import React,{useState,useEffect} from 'react'
import { Button, Drawer, Form, Input,Select } from 'antd';
import MyNotification from '../../components/MyNotification/MyNotification';
import { $add,$getOne,$update } from '../../api/roomApi'
import { $list as $typeList } from '../../api/typeApi';
import { $listToUpdate as $stateList } from '../../api/stateApi';
import ReactQuill from 'react-quill';
export default function AddRome({open,setOpen,loadList,roomId,setRoomId}) {
    let [form]=Form.useForm()
    let [typeList,setTypeList]=useState([])
    let [stateList,setStateList]=useState([])
    let [notiMsg,setNotiMsg]=useState({type:'',description:''})
    const loadTypeList=()=>{
        $typeList().then((data)=>{
            console.log(data)
            data=data.map((r)=>{
                return{
                    value:r.roomTypeId,
                    label:r.roomTypeName
                };
            });
            data.unshift({value:0,label:'请选择房型'})
            setTypeList(data);
        })
    }
    const loadStateList=()=>{
        $stateList().then((data)=>{
            data=data.map((r)=>{
                return {
                    value:r.roomStateId,
                    label:r.roomStateName
                }
            })
            data.unshift({value:0,label:'请选择房间状态'})
            setStateList(data);
        })
    }
    useEffect(()=>{
        loadTypeList()
        loadStateList()
        if(roomId!=0){
            console.log(roomId)
            $getOne({roomId}).then((data)=>{
                data.id=data.roomId
                form.setFieldsValue(data)
            })
        }
    },[roomId])
    const onClose = () => {
        clear()
        setRoomId(0)
        setOpen(false)
    }
    const onFinish = (values) => {
        console.log("==========================="+values)
        if(roomId){
            $update(values).then(({success,message})=>{
                if(success){
                    setNotiMsg({type:'success',description:message})
                    loadList()
                }else{
                    setNotiMsg({type:'error',description:message})
                }
            })
        }else{
            $add(values).then(({success,message})=>{
                if(success){
                    setNotiMsg({type:'success',description:message})
                    clear()
                    loadList()
                }else{
                    setNotiMsg({type:'error',description:message})
                }
            })
        }
      };
      const clear=()=>{
        form.resetFields();
      }
  return (
    <>
    <Drawer title={roomId!=0?"修改客房":"添加客房"} width={600} placement='right' onClose={onClose} open={open}>
                <Form
                    name="basic"
                    form={form}
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 18,
                    }}
                    style={{
                        maxWidth: 600,
                    }}
                    // initialValues={{
                    //     remember: true,
                    // }}
                    onFinish={onFinish}
                    // onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="房间编号"
                        name="id"
                        hidden
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="房间编号"
                        name="roomId"
                        rules={[
                            {
                                required: true,
                                message: '请输入房间编号',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="房间描述"
                        name="description"
                        rules={[
                            {
                                required: true,
                                message: '请输入房间描述',
                            },
                        ]}
                    >
                        <ReactQuill
                       className='publish-quill'
                       theme='snow'
                       placeholder='请输入房间描述'
                       />
                    </Form.Item>
                    
                    <Form.Item
                        label="房间类型"
                        name="roomTypeId"
                        rules={[
                            {
                                required: true,
                                message: '请选择房间类型',
                            },
                        ]}
                    >
                        <Select size="small" style={{width:'100px'}}
                    options={typeList}
                ></Select>
                    </Form.Item>

                    <Form.Item
                        label="房间状态"
                        name="roomStateId"
                        rules={[
                            {
                                required: true,
                                message: '请选择房间状态',
                            },
                        ]}
                    >
                        <Select size="small" style={{width:'100px'}}
                    options={stateList}
                ></Select>
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{
                            offset: 4,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            {roomId?'修改':'添加'}
                        </Button>
                        <Button onClick={clear} style={{marginLeft:'10px'}}>
                            取消
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
            <MyNotification notiMsg={notiMsg}/>
    </>
  )
}

